<template>
  <div style="display: inline-block;margin-left: 10px">
    <el-button @click="createSkuInfo(data)" type="warning" style="background-color: rgba(63, 86, 128, 1)">{{ $t('common.Confirm and print the new label') }}</el-button>

    <el-dialog
      :title="$t('stock.Generate SKU tags')"
      :visible.sync="selectSkuInfoListLoading"
      :modal-append-to-body="false"
      width="750px"
      style="max-height: 800px;overflow-y: auto;"
    >
      <div style="display: flex; justify-content: center; align-items: center; margin-bottom: 40px">
        <div style="border: 1px solid rgb(230, 235, 245);border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0; width: 550px; height: 230px;display: flex; justify-content: center; align-items: center;">
          <div style="border: 3px solid rgba(121, 121, 121, 1); width: 450px; height: 180px; border-radius: 4px;">
            <div style="display: flex; flex-direction: row; width: 450px; font-size: 18px; font-weight: bold; height: 30px">
              <div v-show="skuUserShowInfo" style="margin-left: 15px;margin-top: 15px;">{{skuUserInfo}}</div>
              <div v-show="skuManufactureShowInfo" style="margin-left: auto; margin-right: 25px;margin-top: 15px">{{skuManufactureInfo}}</div>
            </div>
            <div style="display: flex; justify-content: center; align-items: center; margin-top: 15px;">
              <el-image
                style="width: 350px; height: 80px"
                :src="skuInfoImg"
                v-if="isImgLoading === false"
              >
              </el-image>
              <template v-if="isImgLoading === true">
                <div style="display: flex; justify-content: center; align-items: center; height: 80px; font-size: 18px; font-weight: bold;">
                  <div>
                    Loading...
                  </div>
                </div>
              </template>
            </div>
            <div style="display: flex; justify-content: center; align-items: center; margin-top: 10px;">
              <div style="font-size: 18px; font-weight: bold;">{{skuInfo}}</div>
            </div>
          </div>
        </div>
      </div>

      <div style="display: flex; justify-content: center; align-items: center;">
        <div style="display: flex; flex-direction: row; width: 615px; font-size: 18px; font-weight: bold;">
          {{$t('stock.GenerateSKUTagsTextSix')}}：
          <el-select v-model="dimensionType" placeholder="请选择" style="width: 130px; margin-left: 70px; position: relative; top: -5px">
            <el-option
              v-for="item in dimensionDisposition"
              :key="item.type"
              :label="item.description"
              :value="item.type">
            </el-option>
          </el-select>
        </div>
      </div>

      <div slot="footer" class="dialog-footer" style="text-align: left; margin-bottom: 20px">
        <el-button @click="selectSkuInfoListLoading = false" size="large" style="margin-right: 30px;">{{ $t('common.cancel') }}</el-button>
        <el-button type="primary" @click="downloadSkuInfoData()" :loading="downloadSkuInfoDataLoading" :disabled="disabled" size="large" style="margin-right: 30px;">{{ $t('common.download') }}</el-button>
        <el-button type="danger" @click="printSkuInfoData()" :loading="printSkuInfoDataLoading" :disabled="disabled" size="large" style="margin-right: 30px;">{{ $t('common.print') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import {createSkuInfoData} from "@/api/stock";
import {confirmAndPrintTheNewPDF, PrintTheNewPDF} from "@/api/order";

export default {
  name: "PrintSkuInfo",
  props:{
    data:{
      type: Object,
    },
    refundGoods:{
      type: Array,
    }
  },
  computed:{

  },
  data(){
    return {
      createSkuInfoListLoading: false,
      uniqueSkuArr: [],
      selectSkuInfoListLoading: false,
      skuInfoImg: '',
      skuUserShowInfo: true,
      skuManufactureShowInfo: true,
      skuPrintNum: 1,
      skuUserInfo: '',
      skuManufactureInfo: '',
      skuInfo: '',
      downloadSkuInfoDataLoading: false,
      printSkuInfoDataLoading: false,
      isImgLoading: true,
      disabled:false,
      dimensionType: 1,
      dimensionDisposition: [
        {'description': '7cm * 3cm', 'type': 1, 'offset': [0, 0]},
        {'description': '8cm * 3cm', 'type': 2, 'offset': [10, 0]},
        {'description': '9cm * 3cm', 'type': 3, 'offset': [20, 0]},
        {'description': '10cm * 3cm', 'type': 4, 'offset': [30, 0]},
      ],
    }
  },
  methods:{
    createSkuInfo(row){
      let skuArr = []
      row.subOrders.forEach(item => {
        if (item.sku !== '') {
          let arrData = {
            'sku': item.sku,
            'userName': row.userAccount,
            'manufacture': row.orderId,
            'subOrderId': item.subOrderId,
            //原数量
            'num': item.num,
            //转库存数量
            'refundNum': this.refundGoods.find(refundItem => refundItem.subOrderId === item.subOrderId).num,
          }
          skuArr.push(arrData)
        }
      })
      let uniqueArr = [];

      for (let i = 0; i < skuArr.length; i++) {
        let isDuplicate = false;
        for (let j = 0; j < uniqueArr.length; j++) {
          if (skuArr[i].sku === uniqueArr[j].sku && skuArr[i].userName === uniqueArr[j].userName) {
            isDuplicate = true;
            break;
          }
        }
        if (!isDuplicate) {
          uniqueArr.push(skuArr[i]);
        }
      }
      this.uniqueSkuArr = uniqueArr
      this.selectSku(this.uniqueSkuArr[0])
    },
    selectSku(row){
      this.isImgLoading = true
      this.createSkuInfoListLoading = false
      this.selectSkuInfoListLoading = true
      this.skuUserShowInfo = true
      this.skuManufactureShowInfo = true
      this.skuUserInfo = row.userName
      this.skuManufactureInfo = row.manufacture
      this.skuInfo = row.sku
      this.skuPrintNum = 1
      this.disabled = true
      createSkuInfoData({'sku': row.sku})
        .then(res=>{
          this.disabled = false
          //获取对应的sku图片
          if (res.status === 200) {
            // 获取Blob对象
            var blob = res.data
            // 创建Blob对象的URL
            this.skuInfoImg = URL.createObjectURL(blob)
            this.isImgLoading = false
          }
        })
    },
    downloadSkuInfoData(){
      this.downloadSkuInfoDataLoading = true
      let offset = this.dimensionDisposition.find(item => item.type === this.dimensionType).offset
      confirmAndPrintTheNewPDF({'data': this.uniqueSkuArr, 'offset': offset})
        .then(res=>{
          this.downloadSkuInfoDataLoading = false
          if(res.type === 'application/json'){
            this.$message({
              message: '下载sku标签失败，请稍后再尝试',
              duration : 5000,
              type: 'error',
              showClose: true,
            });
            return;
          }

          const pdfFile = window.URL.createObjectURL(
            new Blob([res.data], { type: "application/pdf" })
          );
          // 跳转页面预览
          window.open(pdfFile);
          // 60秒后释放
          setTimeout(()=>{
            URL.revokeObjectURL(pdfFile); //释放URL对象
          },60000)
        })
    },
    printSkuInfoData(){
      this.printSkuInfoDataLoading = true
      let offset = this.dimensionDisposition.find(item => item.type === this.dimensionType).offset
      PrintTheNewPDF({'data': this.uniqueSkuArr, 'offset': offset})
        .then(res=>{
          this.printSkuInfoDataLoading = false
          if(res.type === 'application/json'){
            this.$message({
              message: '打印sku标签失败，请稍后再尝试',
              duration : 5000,
              type: 'error',
              showClose: true,
            });
            return;
          }
          this.selectSkuInfoListLoading = false
          // 打印机打印
          this.$emit('child-data', res.data);
        })
    },
  }
}
</script>

<style lang="scss">
  .skuCheckbox .el-checkbox__label {
    font-size: 18px;
  }
</style>
